import React, { useEffect, useState } from 'react';
import { Typography, Card, Row, Col, Statistic, Space, Divider, Alert, Grid } from 'antd';
import {
  TranslationOutlined,
  InfoCircleOutlined,
  AppstoreOutlined,
  TeamOutlined,
  CheckCircleOutlined,
  GlobalOutlined
} from '@ant-design/icons';
import { useSelector } from 'react-redux';
import { RootState } from '../store';
import { getUserCount, getLanguageCount, getElementCount } from '../api/dashboard';
import { useNavigate } from 'react-router-dom'; // 引入 useNavigate

const { Paragraph, Text } = Typography;
const { useBreakpoint } = Grid;

const Dashboard: React.FC = () => {
  const user = useSelector((state: RootState) => state.auth.user);
  const screens = useBreakpoint();
  const navigate = useNavigate(); // 初始化 useNavigate

  const [userCount, setUserCount] = useState<number>(0);
  const [languageCount, setLanguageCount] = useState<number>(0);
  const [elementCount, setElementCount] = useState<number>(0);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const userResponse = await getUserCount();
        setUserCount(userResponse.users);
        const languageResponse = await getLanguageCount();
        setLanguageCount(languageResponse.lang);
        const elementResponse = await getElementCount();
        setElementCount(elementResponse.element);
        console.log('Dashboard data fetched successfully:', userResponse, languageResponse, elementResponse);
      } catch (error) {
        console.error('Failed to fetch dashboard data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div style={{
      maxWidth: '1200px',
      margin: '0 auto',
      padding: '24px'
    }}>
      <Typography.Title level={2} style={{paddingLeft:"inherit"}}>控制面板</Typography.Title>
      <Typography.Paragraph style={{paddingLeft:"inherit"}}>
        欢迎回来，{user?.nick_name || '用户'}！ (用户角色: {user?.role == 2 ? '管理员' : '普通用户'})
      </Typography.Paragraph>

      <Space direction="vertical" size={screens.xs ? "middle" : "large"} className="dashboard-space">
        <Card
          title={
            <span className="card-title">
              <InfoCircleOutlined />
              系统简介
            </span>
          }
          className="intro-card"
        >
          <Typography>
            <Paragraph>
              <Text strong>多语言翻译管理系统</Text> 是一个专为全球化产品和服务设计的综合性翻译管理平台。
              本系统旨在简化多语言内容的创建、管理和部署流程，帮助企业高效地将产品和服务推向全球市场。
            </Paragraph>

            <Divider orientation="left"></Divider>

            <Row gutter={[screens.xs ? 8 : 16, screens.xs ? 8 : 16]}>
              <Col xs={24} md={8}>
                <Card size="small" title="语言管理" className="feature-card">
                  <div className="feature-content">
                    <TranslationOutlined className="feature-icon feature-icon-blue" />
                    <div>
                      支持添加、编辑和管理多种语言，可设置默认语言和区域特定的语言变体，满足不同地区的本地化需求。
                    </div>
                  </div>
                </Card>
              </Col>
              <Col xs={24} md={8}>
                <Card size="small" title="组件翻译" className="feature-card">
                  <div className="feature-content">
                    <AppstoreOutlined className="feature-icon feature-icon-orange" />
                    <div>
                      将UI组件与翻译文本关联，实现组件级别的多语言支持，便于维护和更新，提高翻译一致性。
                    </div>
                  </div>
                </Card>
              </Col>
              <Col xs={24} md={8}>
                <Card size="small" title="用户权限" className="feature-card">
                  <div className="feature-content">
                    <TeamOutlined className="feature-icon feature-icon-green" />
                    <div>
                      完善的用户角色管理，支持管理员、翻译人员，确保翻译工作流程顺畅进行。
                    </div>
                  </div>
                </Card>
              </Col>
            </Row>

              <Alert
              message="系统优势"
              className="system-advantages"
              description={
                <ul className="advantages-list">
                  <li><CheckCircleOutlined style={{ color: '#52c41a' }} /> <Text strong>高效协作</Text>：支持多人同时在线编辑和审核翻译内容</li>
                  <li><CheckCircleOutlined style={{ color: '#52c41a' }} /> <Text strong>版本控制</Text>：记录所有翻译内容的修改历史，方便追踪和回滚</li>
                  <li><CheckCircleOutlined style={{ color: '#52c41a' }} /> <Text strong>数据分析</Text>：提供翻译完成度、质量评估等数据分析功能</li>
                  <li><CheckCircleOutlined style={{ color: '#52c41a' }} /> <Text strong>API集成</Text>：提供API接口，便于与其他系统集成</li>
                </ul>
              }
              type="info"
              showIcon
              style={{ marginTop: '24px' }}
            />
          </Typography>
        </Card>

        {/* 统计卡片区域 */}
        <Row gutter={[screens.xs ? 16 : 24, screens.xs ? 16 : 24]}>
          <Col xs={24} sm={12} lg={8}>
            <Card hoverable className="stat-card" onClick={() => navigate('/languages')}> {/* 添加点击事件 */}
              <Statistic
                title="总语种数"
                value={languageCount}
                valueStyle={{ color: '#1890ff' }}
                prefix={<GlobalOutlined />}
                suffix="种"
              />
              <div className="stat-description">
                系统支持的语言总数
              </div>
            </Card>
          </Col>
          <Col xs={24} sm={8}>
            <Card hoverable className="stat-card" onClick={() => navigate('/users')}> {/* 添加点击事件 */}
              <Statistic
                title="总用户数"
                value={userCount}
                valueStyle={{ color: '#52c41a' }}
                prefix={<TeamOutlined />}
                suffix="人"
              />
              <div className="stat-description">
                系统注册用户总数
              </div>
            </Card>
          </Col>
          <Col xs={24} sm={8}>
            <Card hoverable className="stat-card" onClick={() => navigate('/components')}> {/* 修改路径为 /components */}
              <Statistic
                title="组件数量"
                value={elementCount}
                valueStyle={{ color: '#fa8c16' }}
                prefix={<AppstoreOutlined />}
                suffix="个"
              />
              <div className="stat-description">
                已创建的翻译组件总数
              </div>
            </Card>
          </Col>
        </Row>

        {/* 附加内容区域 */}
        <Row gutter={[screens.xs ? 16 : 24, screens.xs ? 16 : 24]}>
          <Col xs={24} lg={12}>
            <Card title="最近活动" className="info-card">
              <p>暂无最近活动</p>
              {/* 这里可以添加最近活动列表 */}
            </Card>
          </Col>
          <Col xs={24} md={12}>
            <Card title="系统状态" className="info-card">
              <p>系统运行正常</p>
              {/* 这里可以添加系统状态信息 */}
            </Card>
          </Col>
        </Row>
      </Space>
    </div>
  );
};

export default Dashboard;